<style>
  body {
    background-color: #f5f6f9;
  }
</style>
<div id="app" v-cloak>
  <div class="px2 pt2 pb1 bg-white mb2 relative">
    <div class="flex items-center">
      <!-- <img class="circle" src="<%=user.headimgurl%>" style="width: 40px; height: 40px" /> -->
      <div style="flex: 1" class="truncate p2">
        <%=user.nickname%>
      </div>
      <div>
        <span class="gray">现有积分 : </span>
        <a href="/user/client/<%=clientid%>/page/logs" class="orange underline bold">{{point}}</a>
      </div>
    </div>

    <a href="/user/client/<%=clientid%>/page/orders"><img src="/img/red/log_btn.png" class="absolute"
        style="width: 2rem; top: 15rem; right: 0px; z-index: 4" />
    </a>

    <a href="<%=process.env.BANNERLINK?process.env.BANNERLINK:'#'%>">
      <img src="<%=process.env.BANNER?process.env.BANNER:'/img/banner.png'%>" style="width: 100%" class="mt1" />
    </a>
  </div>

  <div class="clearfix">
    <div class="col col-6 center p1" v-for="item in pointItems" @click="openItem(item)">
      <div class="bg-white" style="box-shadow: 0px 3px 6px rgba(112, 125, 148, 0.16); border-radius: 5px">
        <div
          style="background-size: cover;background-repeat: no-repeat;background-position: center;width: 100%;height:150px; border-radius: 5px 5px 0 0;"
          v-bind:style="{
          'background-image':'url('+item.photo+')'
        }"></div>
        <div class="m1 left-align">
          <div class="font-16 bold truncate">{{item.name}}</div>
          <!-- <div v-if="item.stock<99">剩余{{item.stock}}个</div> -->
          <div v-else>&nbsp;</div>
        </div>
        <div class="m1 flex items-center left-align" style="color: #f26d6d; font-size: 18px; font-weight: bolder">
          <div style="flex: 1">{{item.point}}积分</div>
          <div class="white circle center"
            style="background-color: #ffaa00; width: 24px; height: 24px; line-height: 24px">
            <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"
              stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <line x1="5" y1="12" x2="19" y2="12"></line>
              <polyline points="12 5 19 12 12 19"></polyline>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 兑换商品窗口 -->
  <div v-show="showItem">
    <div class="weui-mask" @click="showItem=false"></div>
    <div class="weui-half-screen-dialog">
      <div class="weui-half-screen-dialog__hd">
        <div class="weui-half-screen-dialog__hd__side">
          <button class="weui-icon-btn" @click="showItem=false">
            <i class="weui-icon-back-arrow-thin"></i>
          </button>
        </div>
        <div class="weui-half-screen-dialog__hd__main">
          <strong class="weui-half-screen-dialog__title"> {{selectedItem.name}} </strong>
        </div>
        <div class="weui-half-screen-dialog__hd__side">
          <button class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea" @click="consumeItem">兑换</button>
        </div>
      </div>
      <div class="weui-half-screen-dialog__bd">
        <div class="flex items-start">
          <img style="width: 80px; height: 80px" class="m1"
            v-bind:src="selectedItem.photo?selectedItem.photo+'?v1':''" />
          <div class="p1">
            <div class="font-15 bold orange">需要{{selectedItem.point}}积分</div>
            <div class="font-14 py1">现有{{point}}积分</div>
            <div class="gray">
              剩余{{selectedItem.stock}}个
              <span v-if="selectedItem.limit=='once'">限兑一个</span>
              <span v-if="selectedItem.limit=='eachday'">每日限兑一个</span>
              <span v-if="selectedItem.limit=='eachweek'">每周限兑一个</span>
              <span v-if="selectedItem.limit=='eachmonth'">每月限兑一个</span>
            </div>
          </div>
        </div>
        <div class="font-14 bold bg-silver rounded p2" v-if="selectedItem.code_desc"
          v-html="selectedItem.code_desc.replace(/\n/g, '<br/>')"></div>
        <div class="font-14 bold center p1" v-if="selectedItem.qrcode">
          <img v-bind:src="selectedItem.qrcode" style="width: 150px; height: 150px" />
        </div>
        <div class="font-14 bold bg-silver rounded p2" v-if="selectedItem.real_desc"
          v-html="selectedItem.real_desc.replace(/\n/g, '<br/>')"></div>
      </div>
      <div class="weui-half-screen-dialog__ft">
        <button @click="consumeItem" class="weui-btn weui-btn_primary">马上兑换</button>
      </div>
    </div>
  </div>

  <div class="p1 center ">
    <a class="gray underline" href='/user/client/<%=clientid%>/page/rank'>排行榜</a>
  </div>
</div>
<script type="text/javascript">
  new Vue({
    el: "#app",
    data: function () {
      return {
        point: "<%=pointData?pointData.point:0%>",
        clientid: "<%=clientid%>",
        imageWidth: (Math.min(780, window.innerWidth) - 180) / 2 + "px",
        pointItems: [],
        pointOrders: [],
        showItem: false,
        selectedItem: {},
      };
    },
    created: function () {
      this.getPointItems();
      this.getPointOrders();
    },
    methods: {
      getPointItems: function () {
        let that = this;
        axios.get("/user/client/<%=clientid%>/pointItems").then(function (res) {
          that.pointItems = res.data.pointItems;
        });
      },
      openItem: function (item) {
        this.selectedItem = item;
        this.showItem = true;
      },
      getPointOrders: function () {
        let that = this;
        axios.get("/user/client/<%=clientid%>/pointOrders").then(function (res) {
          that.pointOrders = res.data.pointOrders;
        });
      },
      consumeItem: function () {
        let that = this;
        axios
          .post("/user/consume/" + this.selectedItem._id)
          .then(function (res) {
            console.log(res.data);
            if (!res.data.status) {
              return weui.toast(res.data.msg);
            }
            that.showItem = false;
            let item = res.data.item;
            if (item.type == "red") {
              weui.alert("成功领取" + item.red_money + "元,已发放到微信钱包.", { title: "兑换成功" });
            } else {
              weui.alert("兑换(" + item.name + ")成功");
            }

            setTimeout(() => {
              location.href = "/user/client/<%=clientid%>/page/orders";
            }, 1000);
          });
      },
    },
  });
</script>